<!--
  智慧社区管理系统 - 安防监控
  @author Wu.Liang
  @date 2024-01-01
-->
<template>
  <div class="monitor-container">
    <div class="header">
      <h1>监控中心</h1>
      <p>实时监控社区安防状况</p>
    </div>

    <div class="monitor-grid">
      <div class="monitor-item" v-for="i in 8" :key="i">
        <div class="monitor-screen">
          <div class="placeholder">监控画面 {{ i }}</div>
        </div>
        <div class="monitor-info">
          <span>摄像头 {{ i }}</span>
          <el-tag type="success" size="small">在线</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
    console.log('监控中心页面加载完成')
})
</script>

<style scoped>
.monitor-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.monitor-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.monitor-screen {
  height: 200px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder {
  color: #999;
  font-size: 14px;
}

.monitor-info {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
